<template>
  <div :class="['section', 'join_Rank']" @click="unmagnify">
    <feast ref="feast"
           :master="userInfo ? userInfo.id : ''"
           :userInfo="userInfo">
    </feast>
    <p class="tip">
      目前已有<em>{{$refs.feast ? $refs.feast.joinCount : ''}}</em>位宾客入席
    </p>
    <home></home>
    <dialogs ref="dialogs"
             :msg="dialogs.init.msg.replace(
                 '{{masterName}}', $refs.feast ? $refs.feast.masterFeast.name : '')"
             :btns="dialogs.init.btns">
    </dialogs>
  </div>
</template>

<script>
  import feast from '@/components/feast';
  import dialogs from '@/components/dialogs';
  import home from '@/components/home';

  export default {
    name: 'joinRank',
    data: function () {
      return {
        getUserInfoPath: 'static/data/my_info.json',
        userInfo: null,
        dialogs: {
          init: {
            msg: '欢迎来到<em>{{masterName}}</em>的囍宴',
            btns: [
              {
                value: '我要入榜，<br>赢取999元现金贺礼',
                href: '/join_rank/set_info'
              },
              {
                value: '查看宴席排行榜',
                href: '/join_rank/ranklist'
              }
            ]
          }
        }
      }
    },
    components: {
      feast,
      dialogs,
      home
    },
    methods: {
      unmagnify: function () {
        let feast = this.$refs.feast;
        feast && feast.isActive ? feast.unmagnify() : '';
      }
    },
    created: function () {
      axios.get(this.getUserInfoPath).then((res) => {
        this.$set(this, 'userInfo', res.data.myInfo);
        setTimeout(() => {
          this.$set(this.$refs.dialogs, 'isShow', true);
        }, 300);
      }).catch((error) => {
        console.log(error);
      });
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/scss/config";

  .join_Rank {
    padding-top: setRem(64px);

    .tip {
      color: #e7c598;
      font-size: setRem(20px);
      text-align: center;
      margin: auto setRem(45px);
      margin-top: setRem(28px);

      em {
        display: inline-block;
        border-bottom: 1px solid #e7c598;
        font-size: 1.2em;

        &:not(:empty) {
          padding: 0 setRem(4px);
        }
      }
    }
  }
</style>
